<template>
  <view class="content">
    <!-- 地址栏 -->
    <view class="address">
      <view class="addressleft">
        <view class="sitetitbox">
          <view class="sitetit"> 卓悦中心ONE AVENUE店 </view>
          <image
            src="../../static/index/right.png"
            mode="widthFix"
            class="siteimgright"
          ></image>
        </view>
        <view class="sitebox">
          <image
            src="/static/order/dingwei.png"
            class="siteimg"
            mode="widthFix"
          ></image>
          <view class="sitenum"> 距离您 896m </view>
        </view>
      </view>
      <!-- 选项卡切换 -->
      <view class="addressright">
        <view class="nav">
          <view
            class="navsonhide"
            :class="{ navson: activetab === i }"
            v-for="(item, i) in nav1list"
            :key="i"
            @click="changenav(i)"
          >
            {{ item.tit }}
          </view>
        </view>
      </view>
      <!-- 选项卡切换 -->
    </view>
    <!-- 地址栏 -->

    <!-- 自取 -->
    <view class="askfor" v-if="activetab === 0">
      <!-- 轮播 -->
      <view class="label">
        <swiper
          :autoplay="true"
          :interval="3000"
          :duration="500"
          :vertical="true"
        >
          <swiper-item class="swiperitem">
            <view class="swiper-item">毒气mini卡”超级购券活动，赶紧去购买</view>
            <image
              src="/static/index/right.png"
              class="swiperright"
              mode="widthFix"
            ></image>
          </swiper-item>
          <swiper-item class="swiperitem">
            <view class="swiper-item">毒气mini卡”超级购券活动，赶紧去购买</view>
            <image
              src="/static/index/right.png"
              class="swiperright"
              mode="widthFix"
            ></image>
          </swiper-item>
        </swiper>
      </view>
      <!-- 轮播 -->
      <!-- 自定义顶部搜索框 用于搜索跳转 skipUrl:跳转url为绝对路径 /pages开头 -->
      <!-- <cc-headSearch skipUrl="/pages/index/search"></cc-headSearch> -->
      <!-- data:商品列表数组[{navtitle:标题 shop:展示列表}] @click:商品条目点击事件-->
      <cc-defineCateList
        :data="data"
        @click="cateItemClick"
      ></cc-defineCateList>
    </view>
    <!-- 自取 -->

    <!-- 外卖 -->
    <view class="takeout" v-if="activetab === 1"> <view style="text-align: center;font-size: 1.5rem;margin-top: 40rpx;">哪有钱吃外卖！！！</view> </view>
    <!-- 外卖 -->
  </view>
</template>

<script>
export default {
  data() {
    return {
      // nav列表
      activetab: 0,
      nav1list: [
        {
          tit: "自取",
        },
        {
          tit: "外卖",
        },
      ],
      // 列表数组 navtitle:标题 shop:展示列表
      data: [
        {
          navtitle: "奈雪早餐",
          shop: [
            {
              shoptitle: "手机一",
              shopimage:
                "https://cdn.pixabay.com/photo/2014/08/05/10/27/iphone-410311_1280.jpg",
            },
          ],
        },
        {
          navtitle: "新品推荐",
          shop: [
            {
              shoptitle: "手机一",
              shopimage:
                "https://cdn.pixabay.com/photo/2014/08/05/10/27/iphone-410311_1280.jpg",
            },
            {
              shoptitle: "手机二",
              shopimage:
                "https://cdn.pixabay.com/photo/2015/05/12/09/13/social-media-763731_1280.jpg",
            },
            {
              shoptitle: "手机三",
              shopimage:
                "https://cdn.pixabay.com/photo/2016/11/20/08/33/camera-1842202_1280.jpg",
            },
            {
              shoptitle: "手机四",
              shopimage: "../../static/image/p4.png",
            },
          ],
        },
        {
          navtitle: "招牌热卖",
          shop: [
            {
              shoptitle: "手机一",
              shopimage:
                "https://cdn.pixabay.com/photo/2014/08/05/10/27/iphone-410311_1280.jpg",
            },
            {
              shoptitle: "手机二",
              shopimage:
                "https://cdn.pixabay.com/photo/2015/05/12/09/13/social-media-763731_1280.jpg",
            },
          ],
        },
        {
          navtitle: "软欧包",
          shop: [
            {
              shoptitle: "手机一",
              shopimage:
                "https://cdn.pixabay.com/photo/2014/08/05/10/27/iphone-410311_1280.jpg",
            },
            {
              shoptitle: "手机二",
              shopimage:
                "https://cdn.pixabay.com/photo/2015/05/12/09/13/social-media-763731_1280.jpg",
            },
            {
              shoptitle: "手机三",
              shopimage:
                "https://cdn.pixabay.com/photo/2016/11/20/08/33/camera-1842202_1280.jpg",
            },
          ],
        },
        {
          navtitle: "手工烘焙",
          shop: [
            {
              shoptitle: "手机一",
              shopimage:
                "https://cdn.pixabay.com/photo/2014/08/05/10/27/iphone-410311_1280.jpg",
            },
            {
              shoptitle: "手机二",
              shopimage:
                "https://cdn.pixabay.com/photo/2015/05/12/09/13/social-media-763731_1280.jpg",
            },
          ],
        },
        {
          navtitle: "芝士名优茶",
          shop: [
            {
              shoptitle: "手机一",
              shopimage:
                "https://cdn.pixabay.com/photo/2014/08/05/10/27/iphone-410311_1280.jpg",
            },
          ],
        },
        {
          navtitle: "无糖茶铺",
          shop: [
            {
              shoptitle: "手机一",
              shopimage:
                "https://cdn.pixabay.com/photo/2014/08/05/10/27/iphone-410311_1280.jpg",
            },
            {
              shoptitle: "手机二",
              shopimage:
                "https://cdn.pixabay.com/photo/2015/05/12/09/13/social-media-763731_1280.jpg",
            },
          ],
        },
        {
          navtitle: "咖啡",
          shop: [
            {
              shoptitle: "手机一",
              shopimage:
                "https://cdn.pixabay.com/photo/2014/08/05/10/27/iphone-410311_1280.jpg",
            },
            {
              shoptitle: "手机二",
              shopimage:
                "https://cdn.pixabay.com/photo/2015/05/12/09/13/social-media-763731_1280.jpg",
            },
          ],
        },
        {
          navtitle: "保温加购",
          shop: [
            {
              shoptitle: "手机一",
              shopimage:
                "https://cdn.pixabay.com/photo/2014/08/05/10/27/iphone-410311_1280.jpg",
            },
            {
              shoptitle: "手机二",
              shopimage:
                "https://cdn.pixabay.com/photo/2015/05/12/09/13/social-media-763731_1280.jpg",
            },
          ],
        },
        {
          navtitle: "共同防疫",
          shop: [
            {
              shoptitle: "手机一",
              shopimage:
                "https://cdn.pixabay.com/photo/2014/08/05/10/27/iphone-410311_1280.jpg",
            },
            {
              shoptitle: "手机二",
              shopimage:
                "https://cdn.pixabay.com/photo/2015/05/12/09/13/social-media-763731_1280.jpg",
            },
          ],
        },
      ],
    };
  },
  mounted() {},
  methods: {
    changenav(i) {
      this.activetab = i;
    },

    cateItemClick(item) {
      uni.showModal({
        title: "点击条目",
        content: "点击条目数据 = " + JSON.stringify(item),
      });
    },
  },
};
</script>

<style lang="scss">
page {
  background-color: #f7f7f7;
  width: 100%;
}

.content {
  display: flex;
  flex-direction: column;

  .address {
    width: 94%;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .addressleft {
      font-size: 0.9rem;

      .sitetitbox {
        display: flex;
        align-items: center;
        margin-bottom: 1rpx;

        .siteimgright {
          width: 30rpx;
          height: 30rpx;
        }
      }

      .sitebox {
        display: flex;
        align-items: center;
        font-size: 0.65rem;
        color: #939597;

        .siteimg {
          width: 34rpx;
          height: 20rpx;
          margin-right: 15rpx;
        }
      }
    }

    .addressright {
      .nav {
        width: 30vw;
        height: 66rpx;
        border-radius: 40rpx;
        background-color: #c6c6c6;
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 0.7rem;
        color: #818082;

        .navson {
          border-radius: 40rpx;
          width: 50%;
          height: 100%;
          display: flex;
          align-items: center;
          justify-content: center;
          text-align: center;
          color: white;
          background-color: #adb838;
        }

        .navsonhide {
          border-radius: 40rpx;
          width: 50%;
          height: 100%;
          display: flex;
          align-items: center;
          justify-content: center;
          text-align: center;
        }
      }
    }
  }

  // 轮播
  .label {
    margin-top: 20rpx;
    width: 100%;
    aspect-ratio: 10;
    background-color: #e7eacf;
    display: flex;
    flex-direction: column;
    justify-content: center;

    .swiperitem {
      padding: 20rpx;
      box-sizing: border-box;
      display: flex;
      justify-content: space-between;
      color: #adb838;
    }

    .swiperright {
      width: 30rpx;
      height: 50rpx;
    }
  }

  // 轮播
}
</style>
